<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/main.css}"/>
    <script th:src="@{/layui/layui.all.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend><span class="" style="font-size: 14px">
        <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
  <span>人员管理<span class="layui-box">&gt;</span></span>
  <a href="/dor/studemo">学生管理<span class="layui-box">&gt;</span></a>
  <span>添加一名学生<span class="layui-box">&gt;</span></span>
</span>
    </legend>
</fieldset>
<div class="layui-row">
    <div class="layui-col-xs12 layui-col-md5">
        <div style="position: absolute;left: 110px;top: 59px">
        <select id="build" class="search_select"></select>
        <select id="room" class="search_select"></select>
        </div>
        <form class="layui-form" method="post" action="/dor/stu">
            <div class="layui-form-item" >
                <label class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input type="text" name="stu_id" autocomplete="off"  placeholder="*必填项" class="layui-input" required="required"/>
                </div>
                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">寝室号</label>

                <div class="">
                    <input type="text" name="room_id" id="r_id" required="required" style="visibility: hidden;position: relative;left: 400px;" lay-verify="required" class="layui-input" placeholder="格式：楼栋+宿舍牌号 例如：31101"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="*必填项"  autocomplete="off"  class="layui-input" lay-verify="required" required="required"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" placeholder="*必填项" autocomplete="off"  class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password"   autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <input type="text" name="cla"   autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学院</label>
                <div class="layui-input-block">
                    <input type="text" name="acad"   autocomplete="off" class="layui-input" value="信息学院"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">籍贯</label>
                <div class="layui-input-block">
                    <input type="text" name="pro"  autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">入学时间</label>
                <div class="layui-input-block">
                    <input type="text" name="time" placeholder="*必填项" id="test2" autocomplete="off" class="layui-input" required="required" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" placeholder="*必填项" id="test1" autocomplete="off" required="required" class="layui-input"  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-filter="add_user">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript">
    var flag = [[${flag}]];
    if (flag === 1){
        layer.open({
            content: '添加成功'
        });
    }
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1'
            ,format: 'yyyy/MM/dd'
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#test2'
            ,format: 'yyyy/MM/dd'
        });
    });
</script>

<script>
    /*<![CDATA[*/
    $.get('/dor/build', function (data) {
//        console.log(data)
        buildList = '<option>选择楼栋</option>'
        data.forEach(function (value) {
//            console.log(value)
            buildList+='<option>'+value.build_id+'</option>'
        })
//        console.log(buildList)
        $("#build").html(buildList)
    })

    $("#build").on('click', function () {
        var build = $("#build").val()
        console.log('0'+build)
        $.get('/dor/rooms/'+build, function (data) {
//        console.log(data)
            buildList = '<option>选择寝室</option>'
            data.forEach(function (value) {
//            console.log(value)
                buildList+='<option value="'+value.id+'">'+value.room_id+'</option>'
            })
//            console.log(buildList)
            $("#room").html(buildList)
        })
    })


    /* 寝室编号的拼接*/
    var build;
    var room;
    $('#build').change(function () {
        build = $('#build').val();
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
        }
    })
    $('#room').change(function () {
        room = $('#room').val()
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
            console.log(room)
        }
    })
    /*]]>*/
</script>

</body>
</html>